<template>
  <div class="article-item">
    <van-cell :to="'/article/' + itemInfo.art_id">
      <!-- 标题 -->
      <div class="title van-multi-ellipsis--l2" slot="title">{{itemInfo.title}}</div>
      <!-- 作者， 点赞数， 时间 -->
      <div slot="label" class="label_all">
        <!-- 三张图片显示区域 -->
        <div v-if="itemInfo.cover.type===3" class="img3">
            <van-image
              v-for="(item,index) in itemInfo.cover.images"
              :key="index"
              width="100"
              height="100"
              :src="item"
              fit="cover"
            />
          </div>
          <span>{{itemInfo.aut_name}}</span>
          <span>{{itemInfo.comm_count}}</span>
          <span>{{itemInfo.pubdate | relativeTime}}</span>
      </div>
      <!-- 单张图片显示区域 :src="itemInfo.cover.images[0]" -->
      <van-image
      class="img1"
      v-if="itemInfo.cover.type===1"
      :src="itemInfo.cover.images[0]"
      fit="cover"
      />
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'articleItem',
  data () {
    return {
    }
  },
  props: {
    itemInfo: {
      type: Object,
      required: true
    }
  },
  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang='less'>
.article-item {
  .title {
    font-size: 32px;
  }
  .van-cell__title {
      display: flex!important;
      flex-direction: column;
      justify-content:space-around;
    }
  ::v-deep .van-cell__value {
      flex: unset;
      width: 232px;
      height: 146px;
    }
  .img3 {
    display: flex;
    justify-content: space-between;
    .van-image {
      border: 1px solid green;
    }
  }
  .img1 {
    border: 1px solid green;
    height: 100%;
    img {
      height: 100%;
    }
  }
  ::v-deep .van-cell__value {

      overflow: unset;
    }
  .label_all span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }
  .label_all span:last-child {
    margin-right: 0;
  }
}
</style>
